import { Link } from '@brillout/docpress'
import { UiFrameworkExtension, ProvidedBy, ConfigSpec } from '../../components'

<ConfigSpec
  env={<>client, and server if <Link href="/ssr"><code>ssr: true</code></Link></>}
  cumulative
  providedBy={<ProvidedBy list={['vike-react', 'vike-solid']} noCustomGuide>the <code>+Wrapper</code> setting</ProvidedBy>}
/>

The `+Wrapper` component wraps the <Link href="/Page">`+Page` component</Link> and all <Link href="/Layout">`+Layout` components</Link>.

```jsx
<Wrapper>     ⟸ component defined by +Wrapper
  <Layout>    ⟸ component defined by +Layout
    <Page />  ⟸ component defined by +Page
  </Layout>
</Wrapper>
```

```tsx
// pages/+Wrapper.tsx

import React from 'react'

// `children` includes +Page and all +Layout components
export default function Wrapper({ children }: { children: React.ReactNode }) {
  return <MyWrapper>{children}</MyWrapper>
}
```

The `+Wrapper` component is usually used for integrating tools, such as <Link href="/integration#data-fetching">tools for data fetching</Link> and <Link href="/store">state management</Link>.

> The only difference between `+Wrapper` and  <Link href="/Layout">`+Layout`</Link> is that `+Wrapper` wraps `+Layout`.

> To integrate tools, we generally recommend `+Wrapper` over `+Layout`, as it ensures that all `+Layout` components are also wrapped.
>
> To define your pages' visual appearance, we generally recommend `+Layout`.


A page can be wrapped by multiple `+Wrapper` components:

```jsx
<Wrapper1>
  <Wrapper2>
    <Wrapper3>
      <Layout>
        <Page />
      </Layout>
    </Wrapper3>
  </Wrapper2>
</Wrapper1>
```


## `pageContext`

You can access <Link href="/pageContext">the `pageContext` object</Link> by using <Link href="/usePageContext">`usePageContext()`</Link>.

```tsx
// /pages/+Layout.tsx

import React from 'react'
import { usePageContext } from 'vike-react/usePageContext' // or vike-{vue,solid}

export function Layout({ children }: { children: React.ReactNode }) {
  const pageContext = usePageContext()
  // ...
}
```


## See also

- <Link href="/Layout" />
- <Link href="/Page" />
- <Link href="/settings" />
